<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>认领目录列表</title>
</head>

<body>
    <div th:fragment="catalogRelation">
        <div class="search-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="search-cataTitle">目录标题：</label>
                    <input type="text" id="search-cataTitle" th:value="${cataTitle}" placeholder="请输入目录标题">
                </div>
                <div class="form-group">
                    <label for="search-internalOrgName">组织机构：</label>
                    <input type="text" id="search-internalOrgName" th:value="${internalOrgName}"
                        placeholder="请输入组织机构名称">
                </div>
                <div class="form-group">
                    <button class="search-btn" onclick="loadMuluzhiliData(1)">查询</button>
                    <button class="reset-btn" onclick="resetMuluzhiliSearch()">重置</button>
                    <button class="upload-by-dept-btn" onclick="showUploadByDeptDialog()"
                        th:disabled="${totalCount == null or totalCount == 0}">按部门上报目录</button>
                    <button class="upload-all-btn" onclick="uploadAllCatalogData()"
                        th:disabled="${totalCount == null or totalCount == 0}">上报所有目录</button>
                </div>
            </div>
        </div>

        <!-- 按部门上报目录对话框 -->
        <div id="uploadByDeptModal" class="modal" style="display: none;">
            <div class="modal-content">
                <span class="close" onclick="closeUploadByDeptModal()">&times;</span>
                <h3>按部门上报目录</h3>
                <form id="uploadByDeptForm">
                    <div class="form-group">
                        <label for="deptCode">选择部门：</label>
                        <select id="deptCode" name="deptCode" required>
                            <option value="">请选择部门</option>
                            <option th:each="dept : ${deptList}" th:value="${dept.deptCode}" th:text="${dept.deptName}">
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="submit">确定上报</button>
                        <button type="button" onclick="closeUploadByDeptModal()">取消</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="table-container">
            <table class="data-table" id="muluzhili-table">
                <thead>
                    <tr>
                        <th>基本要素目录ID</th>
                        <th>数据目录名称</th>
                        <th>数据所属分类</th>
                        <th>分类码</th>
                        <th>数据所属领域</th>
                        <th>其他所属领域</th>
                        <th>事项名称</th>
                        <th>事项编码</th>
                        <th>数据所在层级</th>
                        <th>政务数据摘要</th>
                        <th>数据目录编码</th>
                        <th>使用要求</th>
                        <th>数据来源事项实施清单（办事指南）名称</th>
                        <th>数据来源事项实施清单（办事指南）编码</th>
                        <th>数据关联事项基本目录（基本要素）名称</th>
                        <th>数据关联事项基本目录（基本要素）编码</th>
                        <th>数据分级</th>
                        <th>数据加工程度</th>
                        <th>数据区域范围</th>
                        <th>数据时间范围</th>
                        <th>政务数据组织机构</th>
                        <th>政务数据组织机构统一社会信用代码</th>
                        <th>政务数据摘要(扩展)</th>
                        <th>更新周期</th>
                        <th>其他更新周期</th>
                        <th>是否发布</th>
                        <th>不发布原因</th>
                        <th>行政区划名称</th>
                        <th>行政区划代码</th>
                        <th>目录基本要素类型</th>
                        <th>数据目录版本</th>
                        <th>目录状态</th>
                    </tr>
                </thead>
                <tbody id="muluzhili-table-body">
                    <tr th:if="${muluzhiliList != null and !muluzhiliList.empty}" th:each="item : ${muluzhiliList}">
                        <td th:text="${item.cataBasicId ?: ''}"></td>
                        <td th:text="${item.cataTitle ?: ''}"></td>
                        <td th:text="${item.businessGroupName ?: ''}"></td>
                        <td th:text="${item.categoryCode ?: ''}"></td>
                        <td th:text="${item.fieldType ?: ''}"></td>
                        <td th:text="${item.fieldTypeName ?: ''}"></td>
                        <td th:text="${item.taskCatalogName ?: ''}"></td>
                        <td th:text="${item.taskCatalogCode ?: ''}"></td>
                        <td th:text="${item.userLevel ?: ''}"></td>
                        <td th:text="${item.description ?: ''}"></td>
                        <td th:text="${item.extDataCataCode ?: ''}"></td>
                        <td th:text="${item.sharedCondition ?: ''}"></td>
                        <td th:text="${item.sourceItemName ?: ''}"></td>
                        <td th:text="${item.sourceItemCode ?: ''}"></td>
                        <td th:text="${item.relationItemName ?: ''}"></td>
                        <td th:text="${item.relationItemCode ?: ''}"></td>
                        <td th:text="${item.importanceLevel ?: ''}"></td>
                        <td th:text="${item.processLevel ?: ''}"></td>
                        <td th:text="${item.areaScope ?: ''}"></td>
                        <td th:text="${item.timeRange ?: ''}"></td>
                        <td th:text="${item.internalOrgName ?: ''}"></td>
                        <td th:text="${item.orgCode ?: ''}"></td>
                        <td th:text="${item.extDescription ?: ''}"></td>
                        <td th:text="${item.updateCycle ?: ''}"></td>
                        <td th:text="${item.otherUpdateCycle ?: ''}"></td>
                        <td th:text="${item.isPublish ?: ''}"></td>
                        <td th:text="${item.notPublishReason ?: ''}"></td>
                        <td th:text="${item.regionName ?: ''}"></td>
                        <td th:text="${item.regionCode ?: ''}"></td>
                        <td th:text="${item.catalogType ?: ''}"></td>
                        <td th:text="${item.extCataVersion ?: ''}"></td>
                        <td th:text="${item.status ?: ''}"></td>
                    </tr>
                    <tr th:if="${muluzhiliList == null or muluzhiliList.empty}">
                        <td colspan="32" style="text-align: center;">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="pagination" id="muluzhili-pagination" th:if="${totalPages > 1}">
            <!-- 上一页按钮 -->
            <button th:if="${currentPage > 1}"
                th:onclick="'loadMuluzhiliData(' + (${currentPage} - 1) + ')'">上一页</button>
            <button th:unless="${currentPage > 1}" disabled>上一页</button>


            <!-- 首页 -->
            <button th:if="${currentPage > 3}" th:onclick="'loadMuluzhiliData(1)'">1</button>
            <span th:if="${currentPage > 4}">...</span>

            <!-- 页码按钮 -->
            <th:block
                th:each="i : ${#numbers.sequence((currentPage > 2 ? currentPage - 2 : 1), (currentPage + 2 < totalPages ? currentPage + 2 : totalPages))}">
                <button th:if="${i == currentPage}" class="active" th:text="${i}"></button>
                <button th:unless="${i == currentPage}" th:onclick="'loadMuluzhiliData(' + ${i} + ')'"
                    th:text="${i}"></button>
            </th:block>

            <!-- 尾页 -->
            <span th:if="${currentPage + 3 < totalPages}">...</span>
            <button th:if="${currentPage + 2 < totalPages}" th:text="${totalPages}"
                th:onclick="'loadMuluzhiliData(' + ${totalPages} + ')'"></button>

            <!-- 下一页按钮 -->
            <button th:if="${currentPage < totalPages}"
                th:onclick="'loadMuluzhiliData(' + (${currentPage} + 1) + ')'">下一页</button>
            <button th:unless="${currentPage < totalPages}" disabled>下一页</button>

            <!-- 跳转到指定页 -->
            <span style="margin-left: 20px;">
                跳转到<input type="number" id="muluzhili-page-input" min="1" th:max="${totalPages}"
                    th:value="${currentPage}" style="width: 50px; padding: 3px; margin: 0 5px;">页
                <button th:onclick="goToMuluzhiliPage([[${totalPages}]])" style="padding: 3px 8px;">确定</button>
            </span>
        </div>
    </div>
</body>

</html>